<template>
  <div class="rule-opera">
    <div class="opera-head">
      <div class="head-title">{{ pageTitle }}</div>
      <div class="head-btn">
        <el-button size="small" type="primary" @click="saveRule"
          >保存规则</el-button
        >
        <el-button size="small" type="primary" @click="$router.go(-1)">
          返回
        </el-button>
      </div>
    </div>
    <div class="opera-main">
      <el-form
        v-loading="isLoading"
        ref="ruleFormRef"
        :rules="rules"
        :model="ruleForm"
        label-width="140px"
        style="width: 60%"
      >
        <el-form-item label="规则名称：" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入规则名称" />
        </el-form-item>
        <!-- 关联本体选择后 请求对应的本体类别和本体关系 -->
        <el-form-item label="关联本体：" prop="ontologyAllId">
          <el-select
            v-model="ruleForm.ontologyAllId"
            placeholder="请选择本体"
            filterable
            style="width: 100%"
            @change="handleOntologyChange"
          >
            <el-option
              v-for="item in ontologyList"
              :key="item.ontologyAllId"
              :label="item.ontologyAllName"
              :value="item.ontologyAllId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="规则描述：" prop="description">
          <el-input
            v-model="ruleForm.description"
            type="textarea"
            :rows="3"
            placeholder="请输入规则描述"
          />
        </el-form-item>
        <el-form-item label="规则配置：" class="bold">
          <span style="color: #aaa">请分别配置实体、属性、关系抽取规则</span>
        </el-form-item>
        <el-form-item label="" label-width="60px">
          <el-tabs v-model="activeTab" @tab-click="handleTabClick">
            <el-tab-pane
              v-for="item in tabMenus"
              :key="item.value"
              :name="item.value"
              :label="item.label"
            >
            </el-tab-pane>
          </el-tabs>
          <div class="rules-wrap entity" v-show="activeTab === '1'">
            <div
              class="rule-item"
              v-for="(entity, idx) in entityRuleList"
              :key="idx"
            >
              <div class="rule-head">
                <div class="rule-head-title">规则{{ idx + 1 }}：</div>
                <el-button
                  type="text"
                  @click="removeRule(idx)"
                  v-if="entityRuleList.length > 1"
                >
                  <i class="el-icon-delete"></i>
                  删除
                </el-button>
              </div>
              <div class="rule-data">
                <div class="info-wrap">
                  <div class="info-item">
                    <div class="info-item-label require">实体类型</div>
                    <div class="info-item-content">
                      <el-select
                        v-model="entity.entityTypeId"
                        filterable
                        placeholder="请选择实体类别"
                        style="width: 100%"
                      >
                        <el-option
                          v-for="item in entityClassList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                  <div class="info-opera"></div>
                </div>
                <div
                  class="info-wrap"
                  v-for="(reg, rdx) in entity.regularExpressions"
                  :key="rdx"
                >
                  <div class="info-item">
                    <div class="info-item-label require">正则表达式</div>
                    <div class="info-item-content">
                      <el-input
                        v-model="reg.value"
                        placeholder="请输入表达式"
                      ></el-input>
                      <span
                        v-if="!isValidRegex(reg.value)"
                        class="illegal-tips"
                      >
                        请输入合法的正则表达式！
                      </span>
                    </div>
                  </div>

                  <div class="info-opera">
                    <i
                      class="el-icon-circle-plus"
                      @click="addRegularExp(idx, rdx)"
                    ></i>
                    <i
                      class="el-icon-remove"
                      v-if="rdx > 0"
                      @click="removeRegularExp(idx, rdx)"
                    ></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="rules-wrap property" v-show="activeTab === '2'">
            <div
              class="rule-item"
              v-for="(prop, idx) in propertyRuleList"
              :key="idx"
            >
              <div class="rule-head">
                <div class="rule-head-title">规则{{ idx + 1 }}：</div>
                <el-button type="text" @click="removeRule(idx)">
                  <i class="el-icon-delete"></i>
                  删除
                </el-button>
              </div>
              <div class="rule-data">
                <div class="info-wrap">
                  <el-row :gutter="10" style="flex: 1; overflow: hidden">
                    <el-col :span="12">
                      <div class="info-item">
                        <div class="info-item-label require">实体类型</div>
                        <div class="info-item-content">
                          <el-select
                            v-model="prop.entityTypeId"
                            filterable
                            placeholder="请选择实体类别"
                            style="width: 100%"
                            @change="
                              (val) => {
                                updatePropertyList(val);
                                prop.propertyId = null;
                              }
                            "
                          >
                            <el-option
                              v-for="item in entityClassList"
                              :key="item.id"
                              :label="item.name"
                              :value="item.id"
                            >
                            </el-option>
                          </el-select>
                        </div></div
                    ></el-col>
                    <el-col :span="12">
                      <div class="info-item">
                        <div class="info-item-label require">实体属性</div>
                        <div class="info-item-content">
                          <el-select
                            v-model="prop.propertyId"
                            filterable
                            placeholder="请选择实体属性"
                            style="width: 100%"
                          >
                            <el-option
                              v-for="item in entityPropertyMap[
                                prop.entityTypeId
                              ]"
                              :key="item.propertyId"
                              :label="item.propertyName"
                              :value="item.propertyId"
                            >
                            </el-option>
                          </el-select>
                        </div></div
                    ></el-col>
                  </el-row>
                  <div class="info-opera"></div>
                </div>
                <div
                  class="info-wrap"
                  v-for="(reg, rdx) in prop.regularExpressions"
                  :key="rdx"
                >
                  <div class="info-item">
                    <div class="info-item-label require">正则表达式</div>
                    <div class="info-item-content">
                      <el-input
                        v-model="reg.value"
                        placeholder="请输入表达式"
                      ></el-input>
                      <span
                        v-if="!isValidRegex(reg.value)"
                        class="illegal-tips"
                      >
                        请输入合法的正则表达式！
                      </span>
                    </div>
                  </div>
                  <div class="info-opera">
                    <i
                      class="el-icon-circle-plus"
                      @click="addRegularExp(idx, rdx)"
                    ></i>
                    <i
                      class="el-icon-remove"
                      v-if="rdx > 0"
                      @click="removeRegularExp(idx, rdx)"
                    ></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="rules-wrap relation" v-show="activeTab === '3'">
            <div
              class="rule-item"
              v-for="(relation, idx) in relationRuleList"
              :key="idx"
            >
              <div class="rule-head">
                <div class="rule-head-title">规则{{ idx + 1 }}：</div>
                <el-button type="text" @click="removeRule(idx)">
                  <i class="el-icon-delete"></i>
                  删除
                </el-button>
              </div>
              <div class="rule-data">
                <div class="info-wrap">
                  <el-row :gutter="10" style="flex: 1; overflow: hidden">
                    <el-col :span="12">
                      <div class="info-item">
                        <div class="info-item-label require">头实体类</div>
                        <div class="info-item-content">
                          <el-select
                            v-model="relation.startEntityTypeId"
                            filterable
                            placeholder="请选择头实体类"
                            style="width: 100%"
                            @change="relation.relationId = null"
                          >
                            <el-option
                              v-for="item in entityClassList"
                              :key="item.id"
                              :label="item.name"
                              :value="item.id"
                            >
                            </el-option>
                          </el-select>
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div class="info-item">
                        <div class="info-item-label require">尾实体类</div>
                        <div class="info-item-content">
                          <el-select
                            v-model="relation.endEntityTypeId"
                            filterable
                            placeholder="请选择尾实体类"
                            style="width: 100%"
                            @change="() => (relation.relationId = null)"
                          >
                            <el-option
                              v-for="item in entityClassList"
                              :key="item.id"
                              :label="item.name"
                              :value="item.id"
                            >
                            </el-option>
                          </el-select>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                  <div class="info-opera"></div>
                </div>
                <div class="info-wrap">
                  <div class="info-item">
                    <div class="info-item-label require">关系名称</div>
                    <div class="info-item-content">
                      <el-select
                        v-model="relation.relationId"
                        filterable
                        placeholder="请选择关系"
                        style="width: 100%"
                      >
                        <el-option
                          v-for="item in getRelationOptions(
                            relation.startEntityTypeId,
                            relation.endEntityTypeId
                          )"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                  <div class="info-opera"></div>
                </div>
                <div
                  class="info-wrap"
                  v-for="(reg, rdx) in relation.regularExpressions"
                  :key="rdx"
                >
                  <div class="info-item">
                    <div class="info-item-label require">正则表达式</div>
                    <div class="info-item-content">
                      <el-input
                        v-model="reg.value"
                        placeholder="请输入表达式"
                      ></el-input>
                      <span
                        v-if="!isValidRegex(reg.value)"
                        class="illegal-tips"
                      >
                        请输入合法的正则表达式！
                      </span>
                    </div>
                  </div>
                  <div class="info-opera">
                    <i
                      class="el-icon-circle-plus"
                      @click="addRegularExp(idx, rdx)"
                    ></i>
                    <i
                      class="el-icon-remove"
                      v-if="rdx > 0"
                      @click="removeRegularExp(idx, rdx)"
                    ></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="add-rule-btn">
            <el-button style="width: 100%" @click="addRule">
              <i class="el-icon-plus"></i>
              新增规则
            </el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  name: "ExtractRuleConfig",
  data() {
    return {
      ruleForm: {
        name: null,
        ontologyAllId: null,
        description: null,
      },
      rules: {
        name: [
          { required: true, message: "规则名称不能为空！", trigger: "blur" },
        ],
        ontologyAllId: [
          { required: true, message: "关联本体不能为空！", trigger: "blur" },
        ],
      },
      // 本体列表
      ontologyList: [],
      // 本体类查询条件
      entitySearchParams: {
        ontologyState: "0",
        pageNum: 1,
        pageSize: 1000,
      },
      // 本体类列表
      entityClassList: [],
      // 本体关系
      relationSearchParams: {
        relationState: "0",
        pageNum: 1,
        pageSize: 1000,
      },
      // 本体关系列表
      relationList: [],
      isLoading: false,
      // 当前tab
      activeTab: "1",
      tabMenus: [
        { label: "实体抽取", value: "1" },
        { label: "属性抽取", value: "2" },
        { label: "关系抽取", value: "3" },
      ],
      // 实体规则数据
      entityRuleList: [
        {
          entityTypeId: null,
          entityType: null,
          regularExpressions: [{ value: null }],
        },
      ],
      // 属性规则数据
      propertyRuleList: [
        // {
        //   entityTypeId: null,
        //   entityType: null,
        //   propertyId: null,
        //   entityProperty: null,
        //   regularExpressions: [{ value: null }],
        // },
      ],
      // 关系规则数据
      relationRuleList: [
        // {
        //   startEntityTypeId: null,
        //   startEntityType: null,
        //   endEntityTypeId: null,
        //   endEntityType: null,
        //   relationId: null,
        //   relationName: null,
        //   regularExpressions: [{ value: null }],
        // },
      ],
      // 存储实体id -> 实体名称映射
      entityIdNameMap: {},
      // 存储关系id -> 关系名称映射
      relationIdNameMap: {},
      // 存储实体id -> 属性id -> 属性名称映射
      entityPropertyIdNameMap: {},
      // 存储实体属性 ontologyId -> propertyList
      entityPropertyMap: {},
    };
  },
  computed: {
    pageTitle() {
      return this.$route.query.id ? "编辑抽取规则" : "新增抽取规则";
    },
  },
  created() {
    this.getAllOntology();
    if (this.$route.query.id) {
      this.getExtractRuleDetail();
    }
  },
  methods: {
    // 获取详情
    getExtractRuleDetail() {
      this.$api.knowledgeGeneration
        .extractRuleDetail({ ruleId: this.$route.query.id })
        .then((res) => {
          const { message, code } = res.data;
          if (code === 200) {
            const resData = res.data.data;
            if (typeof resData === "object") {
              Object.assign(this.ruleForm, resData);
              this.handleOntologyChange();
              // 尝试解析json数据
              try {
                // 实体
                if (resData.entityExtractionRule) {
                  const tmpEnArr = JSON.parse(resData.entityExtractionRule);
                  this.entityRuleList = tmpEnArr.map((item) => {
                    return {
                      ...item,
                      regularExpressions: item.regularExpressions.map((i) => {
                        return {
                          value: i,
                        };
                      }),
                    };
                  });
                }
                // 属性
                if (resData.propertyExtractionRule) {
                  const tmpPrArr = JSON.parse(resData.propertyExtractionRule);
                  this.propertyRuleList = tmpPrArr.map((item) => {
                    return {
                      ...item,
                      regularExpressions: item.regularExpressions.map((i) => {
                        return {
                          value: i,
                        };
                      }),
                    };
                  });
                  // 查询属性映射信息
                  this.propertyRuleList.forEach((i) => {
                    this.updatePropertyList(i.entityTypeId);
                  });
                }
                // 关系
                if (resData.relationExtractionRule) {
                  const tmpReArr = JSON.parse(resData.relationExtractionRule);
                  this.relationRuleList = tmpReArr.map((item) => {
                    return {
                      ...item,
                      regularExpressions: item.regularExpressions.map((i) => {
                        return {
                          value: i,
                        };
                      }),
                    };
                  });
                }
              } catch (error) {
                console.log(error);
              }
            }
          } else {
            this.$message.warning(message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取全部本体模型
    getAllOntology() {
      this.$axios
        .get(this.$api.ontologyModel.xinbiaoObj.searchall)
        .then((res) => {
          if (res.data.code !== 200) {
            this.$message.error(res.data.message);
          } else {
            this.ontologyList = res.data.data || [];
          }
        })
        .catch();
    },
    // 获取本体模型下的本体类
    getOntologyClass() {
      return new Promise((resolve, reject) => {
        this.$axios
          .get(this.$api.ontologyModel.xinbiaoObj.searchontology, {
            params: {
              ontologyAllId: this.ruleForm.ontologyAllId,
              ...this.entitySearchParams,
            },
          })
          .then((res) => {
            if (res.data.code !== 200) {
              this.$message.error(res.data.message);
            } else {
              this.entityClassList = res.data.data.list || [];
              this.entityIdNameMap = {};
              this.entityClassList.forEach((e) => {
                this.entityIdNameMap[e.id] = e.name;
              });
            }
            resolve();
          })
          .catch((e) => {
            reject(e);
          });
      });
    },
    // 本体类关系
    getOntologyRelation() {
      return new Promise((resolve, reject) => {
        this.$axios
          .get(this.$api.ontologyModel.xinbiaoObj.searchRealation, {
            params: {
              ontologyAllId: this.ruleForm.ontologyAllId,
              ...this.relationSearchParams,
            },
          })
          .then((res) => {
            if (res.data.code !== 200) {
              this.$message.error(res.data.message);
            } else {
              this.relationList = res.data.data.list || [];
              this.relationIdNameMap = {};
              this.relationList.forEach((e) => {
                this.relationIdNameMap[e.id] = e.name;
              });
            }
            resolve();
          })
          .catch((e) => reject(e));
      });
    },
    // 关联本体变化 查询实体和关系
    handleOntologyChange() {
      this.getOntologyClass();
      this.getOntologyRelation();
      this.entityPropertyIdNameMap = {};
    },
    // 选中实体类后 查询属性
    updatePropertyList(id) {
      if (id in this.entityPropertyMap) {
        return;
      } else {
        this.$axios
          .get(this.$api.knowledgeMap.ontologyProperty, {
            params: { ontologyId: id },
          })
          .then((res) => {
            let code = res.data.code;
            if (code !== 200) {
              this.$message.warning(res.data.message);
            } else {
              if (Array.isArray(res.data.data) && res.data.data.length) {
                this.$set(this.entityPropertyMap, id, res.data.data);
                // 存储实体id-属性id：属性name
                let tmpMap = {};
                res.data.data.forEach((e) => {
                  tmpMap[e.propertyId] = e.propertyName;
                });
                this.entityPropertyIdNameMap[id] = tmpMap;
              }
            }
          });
      }
    },
    // 查询关系
    getRelationOptions(startId, endId) {
      if (!startId && !endId) return [];
      let fromName = this.entityIdNameMap[startId];
      let toName = this.entityIdNameMap[endId];
      if (fromName && toName) {
        return this.relationList.filter(
          (i) => i.sourceName === fromName && i.targetName === toName
        );
      } else {
        if (fromName) {
          return this.relationList.filter((i) => i.sourceName === fromName);
        } else {
          return this.relationList.filter((i) => i.targetName === toName);
        }
      }
    },
    handleTabClick() {},
    // 新增规则
    addRule() {
      if (this.activeTab === "1") {
        this.entityRuleList.push({
          entityTypeId: null,
          entityType: null,
          regularExpressions: [{ value: null }],
        });
      } else if (this.activeTab === "2") {
        this.propertyRuleList.push({
          entityTypeId: null,
          entityType: null,
          propertyId: null,
          entityProperty: null,
          regularExpressions: [{ value: null }],
        });
      } else if (this.activeTab === "3") {
        this.relationRuleList.push({
          startEntityTypeId: null,
          startEntityType: null,
          endEntityTypeId: null,
          endEntityType: null,
          relationId: null,
          relationName: null,
          regularExpressions: [{ value: null }],
        });
      }
    },
    // 删除规则
    removeRule(idx) {
      if (this.activeTab === "1") {
        this.entityRuleList.splice(idx, 1);
      } else if (this.activeTab === "2") {
        this.propertyRuleList.splice(idx, 1);
      } else if (this.activeTab === "3") {
        this.relationRuleList.splice(idx, 1);
      }
    },
    // 添加正则表达式
    addRegularExp(idx, rdx) {
      if (this.activeTab === "1") {
        this.entityRuleList[idx].regularExpressions.splice(rdx, 0, {
          value: null,
        });
      } else if (this.activeTab === "2") {
        this.propertyRuleList[idx].regularExpressions.splice(rdx, 0, {
          value: null,
        });
      } else if (this.activeTab === "3") {
        this.relationRuleList[idx].regularExpressions.splice(rdx, 0, {
          value: null,
        });
      }
    },
    // 移除正则表达式
    removeRegularExp(idx, rdx) {
      if (this.activeTab === "1") {
        this.entityRuleList[idx].regularExpressions.splice(rdx, 1);
      } else if (this.activeTab === "2") {
        this.propertyRuleList[idx].regularExpressions.splice(rdx, 1);
      } else if (this.activeTab === "3") {
        this.relationRuleList[idx].regularExpressions.splice(rdx, 1);
      }
    },
    // 校验是否合法正则表达式
    isValidRegex(pattern) {
      try {
        new RegExp(pattern, "g");
        return true;
      } catch (error) {
        return false;
      }
    },
    // 校验并转换提交信息
    transSubmitInfo() {
      // 实体规则
      for (let e of this.entityRuleList) {
        if (!e.entityTypeId) {
          this.activeTab = "1";
          return this.$message.warning("请选择实体类型");
        } else {
          let empty = e.regularExpressions.find((i) => !i.value);
          if (empty) {
            this.activeTab = "1";
            return this.$message.warning("正则表达式不能为空");
          }
          let illegal = e.regularExpressions.find(
            (i) => !this.isValidRegex(i.value)
          );
          if (illegal) {
            this.activeTab = "1";
            return this.$message.warning("存在不合法的正则表达式");
          }
          e.entityType = this.entityIdNameMap[e.entityTypeId];
        }
      }
      // 属性规则
      for (let p of this.propertyRuleList) {
        if (!p.entityTypeId) {
          this.activeTab = "2";
          return this.$message.warning("请选择实体类型");
        } else if (!p.propertyId) {
          this.activeTab = "2";
          return this.$message.warning("请选择实体属性");
        } else {
          let empty = p.regularExpressions.find((i) => !i.value);
          if (empty) {
            this.activeTab = "2";
            return this.$message.warning("正则表达式不能为空");
          }
          let illegal = p.regularExpressions.find(
            (i) => !this.isValidRegex(i.value)
          );
          if (illegal) {
            this.activeTab = "2";
            return this.$message.warning("存在不合法的正则表达式");
          }
          p.entityType = this.entityIdNameMap[p.entityTypeId];
          // 编辑时如果没有修改实体类型 entityPropertyIdNameMap中不会包含属性id的信息
          // 此时忽略以下的赋值操作
          if (
            !(
              p.entityProperty !== null &&
              !this.entityPropertyIdNameMap[p.entityTypeId]
            )
          ) {
            p.entityProperty =
              this.entityPropertyIdNameMap[p.entityTypeId][p.propertyId];
          }
        }
      }
      // 关系规则
      for (let r of this.relationRuleList) {
        if (!r.startEntityTypeId) {
          this.activeTab = "3";
          return this.$message.warning("请选择头实体类");
        } else if (!r.endEntityTypeId) {
          this.activeTab = "3";
          return this.$message.warning("请选择尾实体类");
        } else if (!r.relationId) {
          this.activeTab = "3";
          return this.$message.warning("请选择关系");
        } else {
          let empty = r.regularExpressions.find((i) => !i.value);
          if (empty) {
            this.activeTab = "3";
            return this.$message.warning("正则表达式不能为空");
          }
          let illegal = r.regularExpressions.find(
            (i) => !this.isValidRegex(i.value)
          );
          if (illegal) {
            this.activeTab = "3";
            return this.$message.warning("存在不合法的正则表达式");
          }
          r.startEntityType = this.entityIdNameMap[r.startEntityTypeId];
          r.endEntityType = this.entityIdNameMap[r.endEntityTypeId];
          r.relationName = this.relationIdNameMap[r.relationId];
        }
      }
      return true;
    },
    saveRule() {
      this.$refs.ruleFormRef.validate((valid) => {
        if (valid) {
          const res = this.transSubmitInfo();
          if (res === true) {
            this.readySubmitForm();
            if (this.ruleForm.ruleId) {
              this.submitEditRule();
            } else {
              this.submitAddRule();
            }
          }
        }
      });
    },
    readySubmitForm() {
      this.ruleForm.entityExtractionRule = JSON.stringify(
        this.entityRuleList.map((item) => {
          return {
            ...item,
            regularExpressions: item.regularExpressions.map((i) => i.value),
          };
        })
      );
      this.ruleForm.propertyExtractionRule = JSON.stringify(
        this.propertyRuleList.map((item) => {
          return {
            ...item,
            regularExpressions: item.regularExpressions.map((i) => i.value),
          };
        })
      );
      this.ruleForm.relationExtractionRule = JSON.stringify(
        this.relationRuleList.map((item) => {
          return {
            ...item,
            regularExpressions: item.regularExpressions.map((i) => i.value),
          };
        })
      );
    },
    submitAddRule() {
      this.$api.knowledgeGeneration
        .addExtractRule(this.ruleForm)
        .then((res) => {
          const { data, message, code } = res.data;
          if (code === 200) {
            this.$message.success(message);
            this.$router.go(-1);
          } else {
            this.$message.warning(res.data.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    submitEditRule() {
      this.$api.knowledgeGeneration
        .editExtractRule(this.ruleForm)
        .then((res) => {
          const { data, message, code } = res.data;
          if (code === 200) {
            this.$message.success(message);
            this.$router.go(-1);
          } else {
            this.$message.warning(res.data.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.rule-opera {
  background: #fff;
}

/deep/ .el-form-item.bold .el-form-item__label {
  font-weight: bold;
}

.opera-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 32px;
  border-bottom: 1px solid #ddd;
  .head-title {
    font-size: 16px;
    font-weight: bold;
  }
}
.opera-main {
  padding: 32px;
}

.rule-item {
  padding: 10px 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.rule-head {
  display: flex;
  justify-content: space-between;
}

.rule-head-title {
  font-size: 16px;
  font-weight: 700;
}

.info-wrap {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  .info-item {
    display: flex;
    flex: 1;
    overflow: hidden;
  }
  .info-opera {
    width: 70px;
    margin-left: 10px;
  }
}

.info-item-label {
  box-sizing: border-box;
  flex-basis: 100px;
  text-align: right;
  padding-right: 10px;
  &.require::before {
    content: "*";
    color: $--color-danger;
    margin-right: 4px;
  }
}
.info-item-content {
  flex: 1;
  overflow: hidden;
}
.illegal-tips {
  position: absolute;
  left: 100px;
  bottom: -30px;
  padding-top: 4px;
  font-size: 12px;
  color: $--color-danger;
}

.el-icon-circle-plus {
  margin: 0 5px;
  font-size: 16px;
  color: $--color-primary;
  cursor: pointer;
}
.el-icon-remove {
  margin: 0 5px;
  font-size: 16px;
  color: $--color-danger;
  cursor: pointer;
}
</style>
